<template>
  <Wrapper>
    <el-card shadow="never">
      <el-steps :active="active" align-center>
        <el-step title="填写信息" icon="Edit"> </el-step>
        <el-step title="上传附件" icon="Upload"></el-step>
        <el-step title="完成" icon="CircleCheck"></el-step>
      </el-steps>

      <el-form
        v-if="active === 1"
        ref="step1FormRef"
        label-width="90"
        label-position="left"
        :model="step1Form"
        :rules="step1Rules"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="step1Form.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="选择院校" prop="school">
          <el-select v-model="step1Form.school" placeholder="请选择院校">
            <el-option label="北京大学" value="1" />
            <el-option label="清华大学" value="2" />
            <el-option label="复旦大学" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否已就业">
          <el-switch
            v-model="step1Form.isEmployed"
            inline-prompt
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="nextStep">下一步</el-button>
        </el-form-item>
      </el-form>
      <el-form
        v-if="active === 2"
        ref="step2FormRef"
        label-width="130"
        label-position="left"
        :model="step2Form"
        :rules="step2Rules"
      >
        <el-form-item label="上传毕业证书">
          <upload v-model="step2Form.images" />
        </el-form-item>
        <el-form-item label="选择毕业时间" prop="date">
          <el-date-picker
            v-model="step2Form.date"
            type="date"
            placeholder="请选择毕业时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="active--">上一步</el-button>
          <el-button type="primary" @click="nextStep">下一步</el-button>
        </el-form-item>
      </el-form>
      <el-result
        v-if="active === 3"
        icon="success"
        title="提交成功"
        sub-title="请留意手机短信通知"
      >
        <template #extra>
          <el-button type="primary" @click="active = 1">继续申请</el-button>
        </template>
      </el-result>
    </el-card>
  </Wrapper>
</template>

<script setup>
import Upload from '@/components/upload'

const active = ref(1)
const step1FormRef = ref(null)
const step2FormRef = ref(null)
const step1Form = ref({
  name: '',
  school: '',
  isEmployed: true,
})
const step2Form = ref({
  date: '',
  images: [],
})
const step1Rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  school: [{ required: true, message: '请选择院校', trigger: 'change' }],
}
const step2Rules = {
  date: [{ required: true, message: '请选择毕业时间', trigger: 'change' }],
}

async function nextStep() {
  const formRefMap = {
    1: step1FormRef,
    2: step2FormRef,
  }
  await formRefMap[active.value].value.validate()
  active.value++
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/mixins.scss';

.el-form {
  margin: 30px auto 0;

  @include responsive-style('large-screen', 'pad') {
    width: 60%;
  }

  @include responsive-style('phone') {
    width: 100%;
  }
}
</style>
